<template>
	<view class="addcode">
		<h1 class="title">编辑爱心传递码备注信息</h1>
		<view class="form">
			<u-form labelWidth="120" labelPosition="top" :rules="rules" :model="code" ref="form1">
				<u-form-item label="爱心传递码名称" prop="memberName">
					<u-input placeholder="请输入爱心传递码名称" v-model="code.memberName" border="none"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="code" v-if="isshow">
			<view class="">
				<view class="text"> 扫码进行认知风险筛查 </view>
				<img :src="baseUrl + code.promotionCodeImg" alt="" style="
            margin: auto;
            width: 430rpx;
            height: 430rpx;
            padding: 60rpx;
            padding-top: 20rpx;
          " />
			</view>
		</view>

		<view class="skele" v-else>
			<view class="">
				请输入爱心传递码名称，并点击下方保存信息生成二维码。
			</view>
		</view>
		<view class="btns">
			<view class="left_btn" @click="handleSave"> 保存信息 </view>
			<view class="right_btn" @click="saveImg"> 保存二维码图片 </view>
		</view>
	</view>
</template>

<script>
	import {
		saveCode
	} from "@/api/api.js";
	import {
		getUrl
	} from "../../../config";
	import {
		mapState
	} from "vuex";
	export default {
		computed: {
			...mapState({
				token: (state) => state.token,
				avatar: (state) => state.userInfo.avatarUrl,
				nickName: (state) => state.userInfo.nickName,
			}),
			isshow() {
				if (this.code.promotionCodeImg) {
					return true;
				} else {
					return false;
				}
			},
		},
		data() {
			return {
				baseUrl: "",
				rules: {
					memberName: [{
							required: true,
							message: "请输入爱心传递码名称",
							trigger: ["blur", "change"],
						},
						{
							required: true,
							message: "爱心码最大长度六位",
							max: 6,
							trigger: ["blur", "change"],
						},
					],
				},
				code: {
					memberName: "",
					promotionCodeImg: "",
				},
			};
		},
		methods: {
			saveImg() {
				console.log(this.code);
				if (!this.code.promotionCodeImg) {
					uni.$u.toast("暂无图片保存");
					return;
				}
				const url = `https://www.ainaoxingdong.com/html_img/index.html#/?query=${JSON.stringify({
					token:this.token,
					avatar:this.avatar,
					type:'2',
					qrCode:{
						nickName:this.code.memberName,
						promotionCodeImg:this.baseUrl + this.code.promotionCodeImg
					}
				})}`

				// const url = `http://localhost:8080/#/?query=${JSON.stringify({
				// 	token:this.token,
				// 	avatar:this.avatar,
				// 	type:'2',
				// 	qrCode:{
				// 		nickName:this.nickName,
				// 		promotionCodeImg:this.baseUrl + this.code.promotionCodeImg
				// 	}
				// })}`

				uni.navigateTo({
					url: `/pages/middleScreening/webview/webview?url=${encodeURIComponent(url)}`,
				});
				// uni.downloadFile({
				// 	url: this.baseUrl + this.code.promotionCodeImg, //仅为示例，并非真实的资源
				// 	success: (res) => {
				// 		console.log("下载成功", res);
				// 		if (res.statusCode === 200) {
				// 			console.log("下载成功");
				// 		}
				// 		uni.saveImageToPhotosAlbum({
				// 			filePath: res.tempFilePath,
				// 			success: function() {
				// 				uni.$u.toast("保存成功");
				// 				console.log("save success");
				// 			},
				// 		});
				// 	},
				// 	fail: (err) => {
				// 		console.log("downloadFile fail, err is:", err);
				// 	},
				// });
			},
			// 生成或者修改code
			handleSave() {
				this.$refs.form1.validate().then(
					(res) => {
						if (!this.code.memberName) {
							uni.$u.toast("请输入爱心传递码名称");
						} else {
							saveCode({
								...this.code,
							}).then(
								(res) => {
									console.log(res, 'ersersersers')
									const {
										data
									} = res;
									this.code = data;
									// uni.$u.toast(res.msg);
								},
								(err) => {
									console.log(err, 'ersersersers')
									// uni.$u.toast(err.msg);
								}
							);
						}
					},
					(err) => {}
				);
			},
		},
		onLoad(option) {
			console.log(getUrl());
			this.baseUrl = getUrl();
			console.log(option);
			if (option.item) {
				// 修改
				this.code = JSON.parse(option.item);
				console.log(this.code);
			} else {
				// 新增
				this.code = {
					memberName: "",
					promotionCodeImg: "",
				};
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.addcode {
		.title {
			margin-top: 150rpx;
			text-align: center;
			font-size: 20px;
			font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1;
			font-weight: normal;
			color: #003941;
		}

		.form {
			width: 550rpx;
			margin: auto;
			margin-top: 30rpx;
			border-radius: 10px 10px 10px 10px;

			.u-form-item__body__left__content__label {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4e5969;
				line-height: 34rpx;
			}

			// margin-bottom: 100rpx;
			.u-form-item {
				border-radius: 10px 10px 10px 10px;
				background: #f3f8fe;
				margin-bottom: 10rpx;
				padding-left: 40rpx;
			}

			.u-line {
				visibility: hidden;
			}
		}

		.skele {
			margin: auto;
			margin-top: 60rpx;
			width: 550rpx;
			height: 590rpx;
			border-radius: 40rpx;
			box-shadow: none;
			// background: (#F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
			// background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
			background-color: #f1f2f4;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				padding: 100rpx;
				word-break: break-all;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #004751;
				line-height: 40rpx;
			}
		}

		.code {
			margin: auto;
			margin-top: 60rpx;
			width: 550rpx;
			height: 590rpx;
			background: #ffffff;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 40rpx;

			.text {
				padding-top: 40rpx;
				text-align: center;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #004751;
			}
		}

		.btns {
			padding-left: 60rpx;
			padding-right: 60rpx;
			padding-top: 100rpx;
			display: flex;
			justify-content: space-between;

			.left_btn {
				width: 300rpx;
				height: 96rpx;
				background: #66ffb5;
				box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
				border-radius: 20rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #003941;
			}

			.right_btn {
				width: 300rpx;
				height: 96rpx;
				background: #004751;
				box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
				border-radius: 20rpx;
				text-align: center;
				line-height: 96rpx;

				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #66ffb5;
			}
		}
	}
</style>
